<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/reset.css">
    <style>
        ul > li{
            /* 虽然说会上下都设置30px，但是会有margin折叠的 */
            margin: 18px 0;
        }
        ul > li > a{
            display: inline-block;
        }
        ul > li > a:hover{
            color: #f04142;
        }
        ul > li .content{
            /* div标签设置为行内元素 */
            display: inline;
        }
        ul > li .ranking{
            display: inline-block;
            width: 24px;
            height: 24px;
            text-align: center;
            line-height: 24px;
            margin-right: 3px;

            font-weight: 700;
            color: #999;
        }

        /* 使用伪类：结构伪类 给榜一榜二榜三加特殊样式  */
        ul > li:nth-child(1) .ranking{
            color: #f04142;
        }
        ul > li:nth-child(2) .ranking{
            color: aquamarine;
        }
        ul > li:nth-child(3) .ranking{
            color: #00f;
        }

        /* 图标相关的代码 */
        ul > li .icon{
            display: inline-block;
            width: 16px;
            height: 16px;
            position: relative;
            left: 4px;
            top: 2px;
        }
        /* 代码抽取 */
        ul >li .new{
            background-image: url(../images/new_icon.svg);
        }

        ul > li .hot{
            background-image: url(../images/hot_icon.svg);
        }
    </style>
</head>
<body>
    
    <ul>
        <li>
            <a href="#">
                <span class="ranking">1</span>
                <!-- 用个标签单独包裹内容会比较好调试 -->
                <div class="content">咒术回战五条悟VS宿摊</div>
                <i class="icon new"></i>
            </a>
        </li>

        <li>
            <a href="#">
                <span class="ranking">2</span>
                <!-- 用个标签单独包裹内容会比较好调试 -->
                <div class="content">咒术回战五条悟VS宿摊</div>
                <i class="icon new"></i>
            </a>
        </li>

        <li>
            <a href="#">
                <span class="ranking">3</span>
                <!-- 用个标签单独包裹内容会比较好调试 -->
                <div class="content">咒术回战五条悟VS宿摊</div>
                <i class="icon hot"></i>
            </a>
        </li>
    </ul>
</body>
</html>